import React, { useState } from 'react'
import Taro, { useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import { AtSearchBar, AtCard, AtButton, AtList, AtListItem, AtModal,AtModalHeader,AtModalContent,AtModalAction , AtInput  } from 'taro-ui'
import { request } from '@/utils'
import './index.less'

//我的车队

const MyFleeList = () => {
  const [oli, setOli] = useState('-')
  const [oil, setOil] = useState('')
  const [value, setValue] = useState('')
  const [id, setId] = useState('')
  const [carList, setCarList] = useState([])
  const [isOpened, setIsOpened] = useState(false)
  const [ role, setRole] = useState('')
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  Taro.getStorage({key: 'userInfo', success(res){
    const {user} = JSON.parse(res.data)
    setRole(user.role)
  }})
  const handleClose = () => {
    setIsOpened(false)
  }
  const handleSetOil = (e) => {
    setId(e)
    setIsOpened(true)
  }
  const handleChangeOil = (e) => {
    setOil(e)
  }
  const handleClick = (e) => {
    setValue(e)
  }
  const handleActionClick = () => {
    setPage(1)
    getList(value, 1)
  }
  const handleConfirm = async () => {
    Taro.showLoading({mask: true})
    const {error} = await request({url: 'hkshihua/motorcade/updateDriverOil', data: {userId: id, oil}})
    setIsOpened(false)
    if(error) return
    Taro.showToast({title: '设置成功', icon: 'success'})
    setTimeout(() => {
      getList()
    }, 3000)
  }
  const getList = async (e, index, flag) => {
    Taro.showLoading({mask: true})
    const res = await request({url: 'hkshihua/motorcade/myMotorcade',data: {licensePlateNumber: e || value, pageIndex: index || page}})
    setOli(res.oilRemain)
    setCarList(flag ? [...carList, ...res.list] :res.list)
    setTotal(res.total)
  }
  usePullDownRefresh(async () => {
    setValue('')
    setPage(1)
    await getList('', 1)
    Taro.stopPullDownRefresh()
  })
  useReachBottom(() => {
    if(page * 10 >= total) return
    setPage(page + 1)
    getList(value, page + 1, true)
  })
  useDidShow(() => {
    setPage(1)
    getList(value, 1)
  })
  const handleEdit = (e) => {
    const { userId, account, licensePlateNumber, name } = e
    Taro.navigateTo({
      url: `/pages/myFleetList/FleetEdit/index?userId=${userId}&account=${account}&licensePlateNumber=${licensePlateNumber}&name=${name}`,
    })
  }
  const handleToAdd = () => {
    Taro.navigateTo({
      url: `/pages/myFleetList/FleetEdit/index`,
    })
  }
  return (
    <View>
      {role !== 'ADMINISTRATOR' && (
        <AtList>
          <AtListItem title='我的剩余油量' extraText={`${oli}升`} />
        </AtList>
      )}
        <AtSearchBar
          showActionButton
          placeholder='请输入车牌号码'
          value={value}
          onChange={handleClick}
          onActionClick={handleActionClick}
        />
        <View className='fleet-list'>
          {
            carList.map((item) => {
              return (
                <View className='fleet-list_item' key={item.userId}>
            <AtCard >
              <View>
                <View className='at-row _body _view_6p'>
                  <View className='at-col at-col-8 at-col--wrap _view_6p'>
                    <View className='_view_6p'>车牌号:{item.licensePlateNumber}</View>
                    <View className='_view_6p'>账号:{item.account}</View>
                    <View className='_view_6p'>剩余油量:{item.oilRemain}升</View>
                  </View>
                  <View className='at-col at-col-3 at-col--wrap'>
                    <View className='btn1'>
                      <AtButton type='primary' size='small' onClick={() => handleEdit(item)}>编辑</AtButton>
                    </View>
                    <View className='btn2'>
                      <AtButton type='primary' size='small' onClick={() => handleSetOil(item.userId)}>分配油量</AtButton>
                    </View>
                  </View>
                </View>
              </View>
            </AtCard>
          </View>
              )
            })
          }
          {carList.length > 0 && total <= page * 10 && <View className='no-data'>暂无更多数据</View>}
          <View style={{height: '90px'}}></View>
        </View>
        <View className='add-more' onClick={handleToAdd}>+</View>
        {isOpened && (
          <AtModal
            isOpened={isOpened}
          // title='分配油量'
            confirmText='确认'
            onClose={handleClose}
          >
          <AtModalHeader>分配油量</AtModalHeader>
          <AtModalContent>
            <View>
              <AtInput cursor={-1} name='oil' value={oil} type='number' placeholder='请输入' onChange={handleChangeOil} />升
            </View>
          </AtModalContent>
          <AtModalAction>
            <Button onClick={handleConfirm}>确定</Button>
          </AtModalAction>
        </AtModal>
        )}

      </View >
  )
}
export default MyFleeList
